<template>
	<div id="tpl">
		<!-- 1.0 轮播图 -->
		<mt-swipe :auto="4000">
			<mt-swipe-item v-for="(item,index) in list" :key="index">
				<img :src="item.img" alt="">
			</mt-swipe-item>

		</mt-swipe>

		<!-- 2.0 九宫格导航 -->
		<ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            	<router-link to="/news/newslist">
                    <span class="mui-icon mui-icon-home"></span>
                    <div class="mui-media-body">新闻资讯</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            	<router-link to="/photo/photolist">
                    <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
                    <div class="mui-media-body">图片分享</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            	<router-link to="/goods/goodslist">
                    <span class="mui-icon mui-icon-chatbubble"></span>
                    <div class="mui-media-body">商品购买</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            	<router-link to="/feedback">
                    <span class="mui-icon mui-icon-location"></span>
                    <div class="mui-media-body">留言反馈</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            	<router-link to="/video">
                    <span class="mui-icon mui-icon-search"></span>
                    <div class="mui-media-body">视频专区</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            	<router-link to="/contactus">
                    <span class="mui-icon mui-icon-phone"></span>
                    <div class="mui-media-body">联系我们</div>
                </router-link>
            </li>
        </ul>
	</div>
</template>

<script>
	import {Toast} from 'mint-ui';
	import common from '../kits/common.js';
	export default {
		data(){
			return {
				list: []
			}
		},
		created(){
			this.toAppTitle();
			// 当页面中的data和methods对象都创建完毕以后，就会自动调用created
			this.getImgs();
		},
		methods: {
			toAppTitle(){
				this.$emit('getTitle', 'Home');
			},
			getImgs(){
				// 实现轮播组件中的数据请求
				// 1.0 确定url
				// http://182.254.146.100:8899/api/getlunbo 轮播图数据接口
				// var url = 'http://182.254.146.100:8899/api/getlunbo';
				var url = common.apidomain + '/api/getlunbo';
				// 2.0 调用$http.get()
				this.$http.get(url).then(function(res){
					var data = res.body;

					if(data.status != 0){
						Toast({
							message: data.message,
							duration: 5000,
							position: center
						});
						return;
					}

					this.list = data.message;
				})
			}
		}
	}

</script>

<style scoped>
	.mint-swipe {
		height: 225px;
	}
	.mint-swipe-item {
		background-color: lightgreen;
		height: 225px;
	}
	.mint-swipe-item img {
		width: 100%;
	}

	.mui-grid-view.mui-grid-9 {
		border-top: 0;
		border-left: 0;
		background-color: #fff;
	}
	.mui-grid-view.mui-grid-9 .mui-table-view-cell {
		border-right: 0;
		border-bottom: 0;
	}

	.mui-icon-home:before,
	.mui-icon-email:before,
	.mui-icon-chatbubble:before,
	.mui-icon-location:before,
	.mui-icon-search:before,
	.mui-icon-phone:before {
		content:  '';
		display: inline-block;
		width: 50px;
		height: 50px;
		background-repeat: round;
	}
	.mui-icon-home:before {
		background-image: url(../../statics/img/1.png);
	}
	.mui-icon-email:before {
		background-image: url(../../statics/img/2.png);
	}
	.mui-icon-chatbubble:before {
		background-image: url(../../statics/img/3.png);
	}
	.mui-icon-location:before {
		background-image: url(../../statics/img/4.png);
	}
	.mui-icon-search:before {
		background-image: url(../../statics/img/5.png);
	}
	.mui-icon-phone:before {
		background-image: url(../../statics/img/6.png);
	}
</style>
